<template>
  <div class='artices'>
    <div class="headerC">
      <header-c></header-c>
    </div>
    <div class="bottom">
      <div class="artices-left">
        <artices-user-card></artices-user-card>
      </div>
      <div class="artices-right">
        <!-- md展示 -->
        <div class="artices-right-div">
          <h1> {{aritcesMsgRef['title']}} </h1>
          <div class="message">
            <div class="message-top">
              <ul>
                <li>{{ aritcesMsgRef['nickname'] }}</li>
                <li> {{aritcesMsgRef['createTime']}} </li>
                <li>
                  <i  class="iconfont icon-browse"></i>
                  <span> {{aritcesMsgRef['views']}} </span>
                </li>
                <li>
                  <i class="iconfont icon-comment"></i>
                  <span> {{aritcesMsgRef['commentCount']}} </span>
                </li>
              </ul>
            </div>
          </div>
          <v-md-editor v-model="aritcesMsgRef['content']" mode="preview"></v-md-editor>
        </div>
        
        <!-- 评论 -->
        <div class="comment" v-if="true">
          <!-- 评论input -->
          <allcomments :aritcesId="aritcesId"></allcomments>
        </div>
      </div>
    </div>
  </div>
  <div class="float">
    <div>
      <i class="iconfont icon-dianzan float-ioc"></i>
      <span>
        点赞
      </span>
    </div>
    <div>
      <i class="iconfont icon-comment float-ioc"></i>
      <span>
        评论
      </span>
    </div>
    <div>
      <i class="iconfont icon-fabulous float-ioc"></i>
      <span>
        收藏
      </span>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  getBlogByIdAPI
} from '../../api/artice'

// 组件
import articesUserCard from '../../components/artices-userCard/index.vue'
import headerC from '../../components/headerC/index.vue'
import allcomments from '../../components/allcomment/index.vue'

export default defineComponent({
  name: '',
  components: {
    articesUserCard,
    headerC,
    allcomments
  },
  setup () {
    const tishi = ref<string>('优质评论可以帮助作者获得更高权重')
    // luyou
    const route = useRoute()
    // 获取路由参数
    const aritcesId = route.query.aritcesId
    // 文章信息文档
    const aritcesMsgRef = ref<any>({})
    
    // 获取文章
    const getaritcesMsg = async () => {
      const res = await getBlogByIdAPI(aritcesId)
      console.log('我是文章',res);
      
      aritcesMsgRef.value = res.data.data
    }

    
    onMounted(() => {
      getaritcesMsg()
    })
    return {
      aritcesMsgRef,
      tishi,
      aritcesId
    }
  }
})
</script>

<style lang='scss' scoped>
.float{
  position: sticky;
  bottom: 0px;
  color: #fff;
  height: 40px;
  background-color: #001223;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
  font-size: 23px;
  z-index: 99;
  div{
    cursor: pointer;
  }
}
.float-ioc{
  font-size: 23px;
}
.is , .is2{
  width:843px;
  height: 32px;
  padding: 6px 8px;
  background: rgba(248,249,251,0.8);
  border: 1px solid #dadde0;
  border-radius: 4px;
  resize: none;
  height: 36px;
  font-size: 14px;
  line-height: 22px;
}
.is2{
  margin-left: 30px;
}
.as{
  width: 80px;
  height: 36px;
  background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  border-radius: 4px;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  margin-left: 8px;
  border: none;
  cursor: pointer;
  padding: 5px;
}
.artices{
  background-color: #001223;
  padding-bottom: 300px;
}

.bottom{
  display: flex;
  margin-top: 20px;
  justify-content: center;
  gap: 10px;

  .artices-right{
    .artices-right-div{
      padding: 20px;
      width: 1010px;
      background-color: #fff;
      box-shadow: 0 0 5px 0 rgb(228, 228, 228);
      .artices-right-content{
        width: 1010px;
        padding: 20px 0;
      }

      .message{
        margin: 20px auto 0;
        background-color: #f8f8f8;

        .message-top{
          ul{
            display: flex;
            align-items: center;
            margin-left: 60px;
            padding: 16px;
            gap: 30px;
            font-size: 14px;
            color: #999aaa;
          }
        }
      }
    }
    
  }
}
 
</style>
